<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>添加/编辑管理</title>
<meta name="viewport" content="width=100%, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/lib/weix/style/weui.min.css">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/comm.css">
<style>
.weui-gallery{ display:block !important; visibility:hidden; opacity:0;}
.weui-gallery.on{ visibility:visible; opacity:1}
</style>
</head>

<body>


<!--
<div>奖品名称: <input type="text" id = "J_title" name ="title" placeholder="请输入奖品名称"> </div>
<div>所需要积分: <input type="text" id = "J_point" name ="point" placeholder="请输入所需要积分"> </div>
<div>市场价格: <input type="text" id = "J_price" name ="price" placeholder="请输入市场价格"> </div>
<div>奖品库存: <input type="text" id = "J_stock" name ="stock" placeholder="请输入奖品库存"> </div>
<div>详情描述: <input type="text" id = "J_content" name ="content" placeholder="请输入描述"> </div>
<div>封面图片: <input type="file" id = "J_upload" name ="pic1" ></div>
<div><input type="hidden" id = "J_pic" name ="pic" ></div>
-->

<div class="weui-cells weui-cells_form" id="uploader">
    
    <div id="J_img_box"></div>
    <div class="weui-cell">
        <div class="weui-cell__bd">
         <div class="weui-uploader">
             <div class="weui-uploader__hd">
                 <p class="weui-uploader__title">商品图片</p>
                 <div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div>
             </div>
             <div class="weui-uploader__bd">
                 <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                 <div class="weui-uploader__input-box">
                     <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple />
                 </div>
             </div>
         </div>
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">商品名称</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="" id="J_title">
        </div>
    </div>
    
    <div class="weui-cell weui-cell_switch">
        <div class="weui-cell__bd">是否上架</div>
        <div class="weui-cell__ft">
            <input class="weui-switch" type="checkbox" id="J_isup">
        </div>
    </div>
        
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">所需积分</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="tel" placeholder="" id="J_point">
        </div>
    </div>
    
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">市场价格</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" placeholder="" id="J_price">
        </div>
    </div>
    
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">库存</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="tel" placeholder="" id="J_stock">
        </div>
    </div>
    
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">兑换量</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="tel" placeholder="" id="J_exchange">
        </div>
    </div>


</div>

<div class="weui-cells__title">商品详情描述</div>  
<div class="weui-cells weui-cells_form" id="uploader_2">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <textarea class="weui-textarea" placeholder="请输入文本" rows="3" id="J_content">1、认真阅读此条任务并转发获得阅读量；2、一个微信号只计一个阅读量；3、合伙人之间转发不计阅读量。</textarea>
        </div>
    </div>
    
    <div class="weui-cell">
     <div class="weui-cell__bd">
         <div class="weui-uploader">
             <div class="weui-uploader__hd">
                 <p class="weui-uploader__title">详情图片</p>
                 <div class="weui-uploader__info"><span id="uploadCount_2">0</span>/5</div>
             </div>
             <div class="weui-uploader__bd">
                 <ul class="weui-uploader__files uploaderFiles"></ul>
                 <div class="weui-uploader__input-box">
                     <input id="uploaderInput_2" class="weui-uploader__input" type="file" accept="image/*" multiple />
                 </div>
             </div>
         </div>
     </div>
    </div>

</div>

<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="javascript:;" id="J_qued">完成</a>
</div>

<!--放大图片-->
<div class="weui-gallery" id="gallery">
    <span class="weui-gallery__img" id="galleryImg" style="background-image:url()"></span>
    <div class="weui-gallery__opr">
        <a href="javascript:;" class="weui-gallery__del" id="J_clo_img">
            <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a>
    </div>
</div>

<script src="/js/zepto.min.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script src="/js/comm.js"></script>
<script type="text/javascript">
//初始化数据
function getProductDetail(id){
	var id = "${id}";
	var data = {id:id};
	var url = "/product/product_detail";

	$.ajax({
		type: "POST",
		async: false,
		dataType: 'json',
		contentType: "application/json; charset=utf-8",
		data: JSON.stringify(data),
		url: url,
		success: function(res){
			if(res.code == 200){
				var product = res.data.product
				var pic_list = res.data.pic_list
				
				$('#J_title').val(product.title)
				$('#J_point').val(product.point)
				$('#J_price').val(product.price)
				$('#J_stock').val(product.stock)
				$('#J_content').val(product.content)
				$('#J_exchange').val(product.exchange)
				
				if(product.isup){  //0上架 1下架
					$('#J_isup').attr('checked',true)
				}else{
					$('#J_isup').attr('checked',false)
				}
				
				$('#J_content').val(product.content)
				
				if(pic_list.length>0){
					for(var i in pic_list) {
						//console.log(pic_list[i]);
						//var shtml = ' <li><img src="'+pic_list[i]+'" alt="" width="50px" height="50px"></li>';
						var shtml = '<li class="weui-uploader__file" data-id="'+i+'" style="background-image: url('+pic_list[i]+');">  </li>'
						$('#uploaderFiles').append(shtml);
					}
				}
			}else{
				weui.topTips(res.msg)
			}
		},
		error: function(){

		},
		complete: function(){
		}
	});
}

$(function(){	
	//初始化
	//sessionStorage.setItem("need-refresh", true);  //返回上一页刷新
	var id  = "${id}}";
	if(id != 0){
	   getProductDetail(id);
	}
	//------------------------------------------------------
	//提交
	$(document).on('click','#J_qued',function(){
		var title = $('#J_title').val().trim()
		var point = $('#J_point').val().trim()
		var price = $('#J_price').val().trim()
		var stock = $('#J_stock').val().trim()
		var exchange = $('#J_exchange').val().trim()
		var isup = $('#J_isup').is(':checked')
		var isup_data = ''
		var content = $('#J_content').val()
		
		if(title == ''){
			weui.topTips('请填写正确的商品名称')
			return false
		}
		
		if(point <= 0){
			weui.topTips('请填写正确的所需积分')
			return false
		}
		
		if(price <= 0){
			weui.topTips('请填写正确的市场价格')
			return false
		}
		
		if(stock <= 0){
			weui.topTips('请填写正确的库存')
			return false
		}
		
		if(exchange < 0){
			weui.topTips('请填写正确的兑换量')
			return false
		}
		
		if(isup == true){ //0上架 1下架
			isup_data = 0
		}else{
			isup_data = 1
		}

		weui.dialog({
			title: '确定保存',
			content: '是否确认保存奖品信息？',
			className: 'custom-classname',
			buttons: [{
				label: '取消',
				type: 'default',
				onClick: function () {}
			}, {
				label: '确定',
				type: 'primary',
				onClick: function () {
					
					var loading = weui.loading('数据提交中');
					var id = "${id}";
					var data = {id:id,title:title,point:point,price:price,stock:stock,exchange:exchange,isup:isup_data,content:content};
					
					$.ajax({
					type: "POST",
					async: false,
					dataType: 'json',
					contentType: "application/json; charset=utf-8",
					data: JSON.stringify(data),
					url: '/productPage/productEdit',
					success: function(res){
						if(res.code == 200){
							weui.toast('提交成功', {
								duration: 1500,
								className: 'custom-classname',
								callback: function(){
									location.replace(history.back(-1))
								}
							});
						}else{
							weui.topTips(res.msg);
						}
					},
					error: function(){
			
					},
					complete: function(){
						loading.hide()
					}
				});
					
						
				}
			}]
		});
		
	})
	

	//-----------------------------------------------------------------------------------
	//上传图片	
	var uploadCount = 0;
		weui.uploader('#uploader', {
		   url: '/upload/uploadFile',
		   auto: true,
		   type: 'file',
		   fileVal: 'photo',
		   compress: {
			   width: 1600,
			   height: 1600,
			   quality: .8
		   },
		   onBeforeQueued: function(files) {
			   // `this` 是轮询到的文件, `files` 是所有文件
		
			   if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
				   weui.alert('请上传图片');
				   return false; // 阻止文件添加
			   }
			   if(this.size > 10 * 1024 * 1024){
				   weui.alert('请上传不超过10M的图片');
				   return false;
			   }
			   if (files.length > 5) { // 防止一下子选择过多文件
				   weui.alert('最多只能上传5张图片，请重新选择');
				   return false;
			   }
			   if (uploadCount + 1 > 5) {
				   weui.alert('最多只能上传5张图片');
				   return false;
			   }
		
			   ++uploadCount;
			   
			   $('#uploadCount').html(uploadCount)
				
			   // return true; // 阻止默认行为，不插入预览图的框架
		   },
		   onQueued: function(){
			   //console.log(this);
			   
			   // console.log(this.status); // 文件的状态：'ready', 'progress', 'success', 'fail'
			   // console.log(this.base64); // 如果是base64上传，file.base64可以获得文件的base64
		
			   // this.upload(); // 如果是手动上传，这里可以通过调用upload来实现；也可以用它来实现重传。
			   // this.stop(); // 中断上传
		
			   // return true; // 阻止默认行为，不显示预览图的图像
		   },
		   onBeforeSend: function(data, headers){
			   //console.log(this, data, headers);
			   // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
			   // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部
		
			   // return false; // 阻止文件上传
		   },
		   onProgress: function(procent){
			   //console.log(this, procent);
			   // return true; // 阻止默认行为，不使用默认的进度显示
		   },
		   onSuccess: function (ret) {
			   if(ret.code == 200){
					//console.log(ret.data.photo);
					$('#J_img_box').append('<input type="number" class="J_img_itme" data-id="'+this.id+'" value="'+ret.data.photo+'" hidden readonly />')
			   }
			   console.log(this, ret);
			   // return true; // 阻止默认行为，不使用默认的成功态
		   },
		   onError: function(err){
			  // console.log(this, err);
			   // return true; // 阻止默认行为，不使用默认的失败态
		   }
	});
	//-----------------------------------------------------------------------------------
	//var uploadCount = 0;
//		weui.uploader('#uploader_2', {
//		   url: '',
//		   auto: true,
//		   type: 'file',
//		   fileVal: 'photo',
//		   compress: {
//			   width: 1600,
//			   height: 1600,
//			   quality: .8
//		   },
//		   onBeforeQueued: function(files) {
//			   // `this` 是轮询到的文件, `files` 是所有文件
//		
//			   if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
//				   weui.alert('请上传图片');
//				   return false; // 阻止文件添加
//			   }
//			   if(this.size > 10 * 1024 * 1024){
//				   weui.alert('请上传不超过10M的图片');
//				   return false;
//			   }
//			   if (files.length > 5) { // 防止一下子选择过多文件
//				   weui.alert('最多只能上传5张图片，请重新选择');
//				   return false;
//			   }
//			   if (uploadCount + 1 > 5) {
//				   weui.alert('最多只能上传5张图片');
//				   return false;
//			   }
//		
//			   ++uploadCount;
//		
//			   // return true; // 阻止默认行为，不插入预览图的框架
//		   },
//		   onQueued: function(){
//			   console.log(this);
//			   
//			   // console.log(this.status); // 文件的状态：'ready', 'progress', 'success', 'fail'
//			   // console.log(this.base64); // 如果是base64上传，file.base64可以获得文件的base64
//		
//			   // this.upload(); // 如果是手动上传，这里可以通过调用upload来实现；也可以用它来实现重传。
//			   // this.stop(); // 中断上传
//		
//			   // return true; // 阻止默认行为，不显示预览图的图像
//		   },
//		   onBeforeSend: function(data, headers){
//			   console.log(this, data, headers);
//			   // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
//			   // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部
//		
//			   // return false; // 阻止文件上传
//		   },
//		   onProgress: function(procent){
//			   console.log(this, procent);
//			   // return true; // 阻止默认行为，不使用默认的进度显示
//		   },
//		   onSuccess: function (ret) {
//			   
//			   console.log(this, ret);
//			   // return true; // 阻止默认行为，不使用默认的成功态
//		   },
//		   onError: function(err){
//			   console.log(this, err);
//			   // return true; // 阻止默认行为，不使用默认的失败态
//		   }
//	});
	//-----------------------------------------------------------------------------------
	//删除图片
	var $this_img = [];
	
	$('#uploaderFiles').on("click", "li", function(){
		$this_img = $(this)
		$('#galleryImg').css('background-image','url('+$(this).css("backgroundImage").replace('url(','').replace(')','')+')')
		$('#gallery').addClass('on')
	});
	$('#galleryImg').on("click", function(){
		$('#gallery').removeClass('on')
	});
	$(document).on('click','#J_clo_img',function(){	//删除图片
		$this_img.remove();
		$('#gallery').removeClass('on')
		uploadCount = uploadCount -1
		$('#uploadCount').html(uploadCount)
	})
	
	
});
</script>
</body>
</html>